<script lang="ts" setup>
import { ref, watch, useTemplateRef } from 'vue';
import { useFetch } from '@/home/hooks/fetch';
import { HoverCard } from '@ark-ui/vue/hover-card';
import { Dialog } from '@ark-ui/vue/dialog';
import { useAppStore } from '@/home/stores/app';
import { useToast } from '@/home/hooks/toast';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  id: {
    type: [Number, String],
    default: '',
  },

  name: {
    type: String,
    default: '',
  },

  nickname: {
    type: String,
    default: '',
  },

  description: {
    type: String,
    default: '',
  },

  avatar: {
    type: String,
    default: '',
  },

  article: {
    type: [Number, String],
    default: '',
  },

  follower: {
    type: [Number, String],
    default: '',
  },

  following: {
    type: [Number, String],
    default: '',
  },

  followed: {
    type: Boolean,
    default: false,
  },
});

const { $fetch } = useFetch();
const appStore = useAppStore();
const { success, error } = useToast();
const { t } = useI18n();

const isFollow = ref(props.followed);
const dialogOpened = ref(false);
const messageValue = ref('');
const textareaRef = useTemplateRef('textareaEl');

watch(() => props.followed, (value) => {
  isFollow.value = value;
});

const changeFollow = async () => {
  const { isSuccess } = await $fetch(isFollow.value ? '/user/cancel' : '/user/focus', {
    autoGotoLogin: true,
    data: {
      userId: props.id,
    },
  });

  if (isSuccess) {
    isFollow.value = !isFollow.value;
  }
};

const submitMessage = async () => {
  if (!messageValue.value) {
    return;
  }

  const { isSuccess } = await $fetch('/notify/private/message', {
    method: 'post',
    autoGotoLogin: true,
    data: {
      receiverId: props.id,
      content: messageValue.value,
    },
  });

  if (isSuccess) {
    success(t('home.explore.author.messageSuccess'));
    messageValue.value = '';
    dialogOpened.value = false;
  }
  else {
    error(t('home.explore.author.messageError'));
  }
}
</script>

<template>
  <div class="component-author">
    <HoverCard.Root :positioning="{ placement: 'bottom-start', gutter: 8 }">
      <HoverCard.Trigger as-child>
        <div class="flex-y-center gap-x-8">
          <div class="flex-shrink-0" v-if="props.avatar">
            <img class="block size-32 border-1 border-#E8E8E8 rounded-full border-solid" :src="props.avatar">
          </div>
          <div class="flex-grow">
            <p class="max-w-300 truncate text-12 text-#292929 font-400 leading-20">{{ props.nickname }}</p>
          </div>
        </div>
      </HoverCard.Trigger>
      <ClientOnly>
        <Teleport to="body">
          <HoverCard.Positioner aria-live="off">
            <HoverCard.Content class="w-300 rounded-4 bg-white p-20 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
              <div class="flex-y-center gap-x-16">
                <div class="flex-shrink-0" v-if="props.avatar">
                  <img class="block size-48 border-1 border-#E8E8E8 rounded-full border-solid" :src="props.avatar">
                </div>
                <div class="flex-grow text-#292929">
                  <p class="max-w-200 truncate text-16 font-semibold leading-24">{{ props.nickname }}</p>
                  <p class="mt-4 max-w-200 truncate text-12 leading-20" v-if="props.description">{{ props.description }}</p>
                </div>
              </div>

              <div class="mt-20 flex-y-center justify-between">
                <button type="button" class="h-32 w-120 border-1 border-#3D7CFA rounded-4 bg-#3D7CFA text-14 text-white disabled:(cursor-not-allowed border-#e8e8e8 bg-#e8e8e8 text-#8B8B8B)" :disabled="appStore.user.username === props.name" @click="changeFollow">
                  {{ isFollow ? $t('home.explore.author.button2') : $t('home.explore.author.button1') }}
                </button>
                <button type="button" class="h-32 w-120 border-1 border-#3D7CFA rounded-4 bg-#3D7CFA/6 text-14 text-#3D7CFA disabled:(cursor-not-allowed border-#e8e8e8 bg-#e8e8e8 text-#8B8B8B)" :disabled="appStore.user.username === props.name" @click="dialogOpened = true">
                  {{ $t('home.explore.author.button3') }}
                </button>
              </div>

              <hr class="mt-19 border-#F7F7F7">

              <div class="mt-10 flex justify-between">
                <div class="w-72 flex flex-col gap-y-4 text-center">
                  <span class="text-16 text-#292929 font-semibold leading-24">{{ props.article }}</span>
                  <span class="text-14 text-#8B8B8B leading-24">{{ $t('home.explore.author.number1') }}</span>
                </div>
                <div class="w-72 flex flex-col gap-y-4 text-center">
                  <span class="text-16 text-#292929 font-semibold leading-24">{{ props.following }}</span>
                  <span class="text-14 text-#8B8B8B leading-24">{{ $t('home.explore.author.number2') }}</span>
                </div>
                <div class="w-72 flex flex-col gap-y-4 text-center">
                  <span class="text-16 text-#292929 font-semibold leading-24">{{ props.follower }}</span>
                  <span class="text-14 text-#8B8B8B leading-24">{{ $t('home.explore.author.number3') }}</span>
                </div>
              </div>
            </HoverCard.Content>
          </HoverCard.Positioner>
        </Teleport>
      </ClientOnly>
    </HoverCard.Root>

    <ClientOnly>
      <Teleport to="body">
        <div class="message-dialog">
          <Dialog.Root v-model:open="dialogOpened" :initial-focus-el="(() => textareaRef as HTMLElement)">
            <Dialog.Backdrop class="message-dialog-backdrop fixed bottom-0 left-0 right-0 top-0 z-99999 bg-black/30" />
            <Dialog.Positioner class="message-dialog-container fixed bottom-0 left-0 right-0 top-0 z-999999">
              <Dialog.Content class="absolute left-50% top-15% w-640 translate-x--50% border-1 border-#ebebeb rounded-6 border-solid bg-white">
                <div class="flex-y-center justify-between border-b-1 border-#ebebeb px-20 py-8">
                  <Dialog.Title class="text-16 text-#292929">{{ $t('home.explore.author.sendMessage') }}</Dialog.Title>
                  <Dialog.CloseTrigger class="bg-transparent">
                    <div class="i-icons:close size-20 text-#8B8B8B"></div>
                  </Dialog.CloseTrigger>
                </div>

                <Dialog.Description class="p-20">
                  <form @submit.prevent="submitMessage">
                    <textarea v-model.trim="messageValue" class="h-100 w-full border-1 border-#ebebeb px-12 py-10 text-14 text-#292929 focus-visible:outline-unset" :placeholder="$t('home.explore.author.inputPlaceholder')" ref="textareaEl"></textarea>
                    <div class="mt-12 flex-y-center justify-end">
                      <button type="submit" class="h-30 border-1 border-#3D7CFA rounded-4 bg-#3D7CFA px-16 text-14 text-white">
                        {{ $t('home.explore.author.sendButton1') }}
                      </button>
                      <button type="button" class="ml-12 h-30 border-1 border-#3D7CFA rounded-4 bg-#3D7CFA/6 px-16 text-14 text-#3D7CFA" @click="dialogOpened = false">
                        {{ $t('home.explore.author.sendButton2') }}
                      </button>
                    </div>
                  </form>
                </Dialog.Description>
              </Dialog.Content>
            </Dialog.Positioner>
          </Dialog.Root>
        </div>
      </Teleport>
    </ClientOnly>
  </div>
</template>

<style lang="scss" scoped>
[data-scope="hover-card"][data-part="content"][data-state="open"] {
  animation: fadeIn 0.25s ease-out;
}

[data-scope="hover-card"][data-part="content"][data-state="closed"] {
  animation: fadeOut 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-10px);
    opacity: 0;
  }
}
</style>
